<template>
  <!-- 内容部分 -->
  <div>
    <div class="box">
  <div id="app">
    <ul>
      
      <li @click="cur=0" :class="{active:cur==0}">精选</li>
      <li @click="cur=1" :class="{active:cur==1}">饮食</li>
      <li @click="cur=2" :class="{active:cur==2}">商城</li>
    </ul>
</div>
</div>
    <div class="tab-content" v-if="cur==0">
      <Featured />
    </div>
    <div class="tab-content" v-else-if="cur==1">
      <Diet />
    </div>
     <div class="tab-content" v-else>
      <Shop />
    </div>
  
  </div>
</template>


<script>
import Featured from "../Found/Featured/Featured";
import Diet from "../Found/Diet/Diet";
import Shop from "../Found/Shop/Shop";
export default {
  data() {
    return {
      cur: 0
    };
  },
  methods: {},
  components: {
    Featured,
    Diet,
    Shop
  }
};
</script>
<style lang="less" scoped>
.box{
  width: 100%;
  border-bottom: 2px solid #6666;
}
#app {
  width: 90%;
  height: 1rem;
  
  margin: 0 auto;
  ul {
    li {
      color: #666;
      padding: 0.3rem 0.9rem;
      float: left;
      font-size: 14px;
      // margin-left: 0.3rem;
    }
    li:last-child{
    padding-right: 0;
    }
    .active {
      color: #000;
    }
  }
}
</style>